<template>
	<view class="content">
		<view class="content_top">
			<view class="title">
				本周优质课程推荐
			</view>
			<!-- banner图 -->
			<swiper class="swiper" indicator-color='#333' indicator-active-color='#FFD700' circular="true"
				indicator-dots="true" autoplay="true" interval="3500" duration="600">
				<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item uni-bg-red">
						<!--  :src="item.bannerImg" -->
						<image class="swiper-img" :src="item.bannerImg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="title">
				各类课程推荐
			</view>

			<view class="list" v-for="(item,index) in courseList" :key="index">
				<view class="list_top">
					<view class="">
						{{item.name}}
					</view>
					<view class="plus-icon" @click="toggleItems(index)">
						{{ item.isOpen ? '-' : '+' }}
					</view>
				</view>
				<view class="item">
					{{item.introduce}}
				</view>
				<view class="items" v-if="item.isOpen">
					<view class="itemtitle">
						{{item.itemtitle}}
					</view>
					<view class="items_list" v-for="(items,i) in item.courses" :key="i" @click="gotoItemList(items.id)">
						{{items.name}}
					</view>
					<view class="items_footer" @click="viewMore">
						查看更多{{item.name}}课程>>
					</view>

				</view>

			</view>
		</view>

		<view class="footer">
			© 2025 活力健身
		</view>

	</view>
</template>

<script>
	import {
		setUserInfo,
		getUserInfo,
		setToken,
		getToken,
		removeUserInfo,
		removeToken
	} from '@/utils/auth';
	export default {
		data() {
			return {
				bannerList: [],
				courseList: [],
			}
		},
		onShow() {
			this.getCourseList();
			this.getBannerlist();
		},
		methods: {
			viewMore() {
				uni.switchTab({
					url: '/pages/about/about'
				});

			},
			getCourseList() {
				this.request('gym/Categories/thisWeek', 'GET').then(res => {
					console.log("res:", res)
					if (res && res.code === 200 && res.data) {
						// 为每个课程类别添加isOpen属性，默认为false
						this.courseList = res.data.map(item => {
							return {
								...item,
								isOpen: false, // 添加isOpen属性，默认不展开
								itemtitle: item.courses && item.courses.length > 0 ? '全部课程' :
									'暂无课程' // 添加标题
							};
						});
					} else {
						uni.showToast({
							title: '获取课程列表失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('请求发生错误:', err);

					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				});
			},
			toggleItems(index) {
				this.courseList[index].isOpen = !this.courseList[index].isOpen;
			},
			getBannerlist() {
				this.request('loadBaneer', 'GET').then(res => {
					if (res) {
							this.bannerList = res.data;
						// let imgurl = {}
						// for (var i = 0; i < res.data.length; i++) {
						// 	imgurl[i] = {};
						// 	imgurl[i]['bannerImg'] = this.myimgurl() + res.data[i].bannerImg;
						// }
						// console.log(imgurl)
						// this.bannerList = imgurl;
					}
				})
			},
			//更多
			gotoItemList(apiParams) {
				if (!getToken()) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `../itemlist/itemlist?page=0&apiParams=${apiParams}`
				});
			},

		}
	}
</script>

<style lang="scss">
	@import '@/common/mixins.scss';

	// space-around
	.footer {
		width: 100%;
		height: 300rpx;
		font-size: 32rpx;
		color: #FFD700;
		background-color: #222222;
		@include flex-center();
	}

	.list {
		width: 100%;
		min-height: 250rpx;
		background-color: #2a2a2a;
		border-radius: 16rpx;
		border-left: 10rpx solid #FFD700;
		margin-bottom: 20rpx;
		@include box-sizing-padding(24rpx, 50rpx);
		@include flex-center(center, space-around, column);

		.items {
			width: 100%;

			.items_footer {
				width: 100%;
				height: 100rpx;
				color: #FFD700;
				font-size: 30rpx;
				font-weight: bold;
				@include flex-center(center, left);
			}

			.itemtitle {
				width: 100%;
				height: 100rpx;
				color: #FFD700;
				font-size: 32rpx;
				font-weight: bold;
				border-top: 1px solid #444;
				@include flex-center(center, left);
			}

			.items_list {
				width: 100%;
				height: 100rpx;
				background-color: #333;
				border-radius: 8rpx;
				color: #e0e0e0;
				border-left: 3px solid transparent;
				margin-bottom: 15rpx;
				font-size: 30rpx;
				@include flex-center(center, left);
				@include box-sizing-padding(24rpx);
			}
		}


		.list_top {
			width: 100%;
			height: 90rpx;
			@include flex-center(center, space-between);
			color: #FFD700;
			font-size: 36rpx;
			font-weight: bold;


			.plus-icon {
				cursor: pointer;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				transition: all 0.3s;
			}
		}

		.item {
			width: 100%;
			height: 90rpx;
			color: #e0e0e0;
			font-size: 30rpx;
		}
	}

	.content {
		width: 100%;
	}

	.content_top {
		width: 686rpx;
		min-height: 100vh;
		margin: 0 auto;
		// border: 2px solid red;

		.title {
			width: 100%;
			height: 100rpx;
			color: #FFD700;
			font-size: 36rpx;
			font-weight: bold;
			border-bottom: 4rpx solid #FFD700;
			margin: 50rpx auto 30rpx;
			@include flex-center();
		}

		.swiper {
			width: 680rpx;
			height: 280rpx;
			border-radius: 15rpx;
			overflow: hidden;

			.swiper-list {
				width: 680rpx;
				height: 280rpx;

				.swiper-item {
					width: 680rpx;
					height: 280rpx;
				}
			}

		}
	}
</style>